<template>
  <div class="deposit-register-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="0" :tab="`待审核(${pageStat['0']})`"></a-tab-pane>
        <a-tab-pane key="1" :tab="`已审核(${pageStat['1']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        :activeKey="activeKey"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <a-button v-if="activeKey === '0'" type="primary" @click="addDepositHandle">新增来款</a-button>
          <a-button v-if="activeKey === '0'" type="primary" @click="batchImportDepsoitHandle">批量导入来款</a-button>
          <a-button v-if="activeKey === '0'" type="default" @click="showDeleteLogHandle">来款删除记录</a-button>
        </template>
        <template #billNum="{ row }">
          {{ row.billNum }}
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>
        <!-- <template #image="{ row }">
          <a-image :width="80" :src="row.image" />
        </template> -->

        <template #image="{ row }">
          <a-image-preview-group v-if="row.image">
            <a-image :width="80" :src="row.image.split(',')[0]" />
            <template style="display: none">
              <a-image v-for="(item, index) in row.image.split(',').slice(1)" :key="index" :src="item" />
            </template>
          </a-image-preview-group>
        </template>

        <template #chargeOffState="{ row }">
          <a-tag v-if="row.chargeOffState === 0" color="#cccc"> 未核销 </a-tag>
          <a-tag v-if="row.chargeOffState === 1" color="#2db7f5"> 部分核销 </a-tag>
          <a-tag v-if="row.chargeOffState === 2" color="#87d068"> 审批通过 </a-tag>
        </template>
        <template #action="{ row }">
          <a-button v-if="activeKey === '0'" type="link" @click="editDepositHandle(row)">编辑</a-button>
          <a-button v-if="activeKey === '1'" type="link" @click="showDepositHandle(row)">查看</a-button>
          <a-button type="link" @click="showLogHandle(row)">日志</a-button>
          <a-button v-if="activeKey === '0'" type="link" danger @click="deleteDepositHandle(row)">删除</a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :requestFn="getLogFn"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="dialogOpts.visible"
      :maskClosable="false"
      :keyboard="false"
      :closable="['BatchImportDeposit'].includes(dialogOpts.component)"
      :footer="null"
      :title="dialogOpts.title"
      :width="dialogOpts.width"
    >
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddDeposit from "./components/addDeposit/index.vue";
import DeleteLog from "./components/deleteLog/index.vue";
import OperationLog from "@/components/operationLog/index.vue";
import BatchImportDeposit from "./components/batchImportDepsoit/index.vue";
export default {
  name: "DepositRegister",
  components: {
    AddDeposit,
    DeleteLog,
    OperationLog,
    BatchImportDeposit
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import CommonHook from "@/hook/commonHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList, tableColumn } from "./data";
import { onActivated } from "vue";
const { tableHeight, loading } = TableHeightHook(110);
const { getLabelByDict } = CommonHook();
const { tableData, searchForm, drawerOpts, tableRef, dialogOpts, activeKey, pageStat } = InitHook();
const { searchHandle, getData, changeTabHandle, addDepositHandle, deleteDepositHandle, showDeleteLogHandle, editDepositHandle, showLogHandle, getLogFn, showDepositHandle, batchImportDepsoitHandle } =
  OperationHook({
    searchForm,
    tableData,
    drawerOpts,
    loading,
    tableRef,
    dialogOpts,
    activeKey,
    pageStat
  });
onActivated(() => {
  searchHandle();
});
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => getData()
});
</script>
<style lang="stylus" scoped>
.deposit-register-page{
    .emphasis-item {
        color: #fe8100;
        font-weight: 600;
    }
}
</style>
